<template>
  <div>
    <el-card>
      <el-button type="success" style="margin-bottom:20px" @click="showCanpany">添加公司</el-button>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="公司id" width="80"></el-table-column>
        <el-table-column prop="name" label="公司名" width="180"></el-table-column>
        <el-table-column prop="address" label="公司地址" width="210"></el-table-column>
        <el-table-column prop="examine" label="审核结果" width="90">
          <template slot-scope="scoped">
            <div>
              <el-tag v-if="scoped.row.examine==1">通过审核</el-tag>
              <el-tag type="warning" v-else-if="scoped.row.examine==2">未审核</el-tag>
              <el-tag type="danger" v-else-if="scoped.row.examine==3">未通过审核</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="businessLicense" label="营业执照" width="330">
          <template slot-scope="scoped">
            <div>
              <viewer>
                <img
                  v-for="item in scoped.row.businessLicense"
                  :src="item"
                  alt
                  style="width:80px;height:80px;margin-left:10px"
                />
              </viewer>
              <span v-if="scoped.row.businessLicense==null" style="color:red">暂无身份证正面照</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="IdCard" label="身份证照片" width="220">
          <template slot-scope="scoped">
            <div>
              <viewer>
                <img
                  v-for="item in scoped.row.IdCard"
                  :src="item"
                  alt
                  style="width:80px;height:80px;margin-left:10px"
                />
              </viewer>
              <span v-if="scoped.row.IdCard==null" style="color:red">暂无身份证正面照</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="create_at" label="添加时间"></el-table-column>
        <el-table-column prop="update_at" label="更新时间"></el-table-column>
        <el-table-column label="操作" width="260" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="showEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handlerDel(scope.row.id)">删除</el-button>
            <el-button type="success" size="small" @click="handlerCheck(scope.row.id)">公司审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination" style="margin-bottom:20px;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10,20, 30, 40,50]"
          :page-size="companyquery.pageSize"
          :current-page="companyquery.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          class="management_page"
        ></el-pagination>
      </div>

      <!-- 公司的弹框 -->
      <el-dialog
        :title="companyName"
        :visible.sync="dialogVisible"
        width="35%"
        :before-close="handlerQu"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleFormRef"
          label-width="155px"
          class="demo-ruleForm"
        >
          <el-form-item label="	公司负责人姓名：" prop="realName" v-if="companyName=='添加公司'">
            <el-input v-model="ruleForm.realName" placeholder="请输入公司负责人姓名"></el-input>
          </el-form-item>
          <el-form-item label="	公司负责人手机号：" prop="phone" v-if="companyName=='添加公司'">
            <el-input v-model="ruleForm.phone" placeholder="请输入公司负责人手机号"></el-input>
          </el-form-item>
          <el-form-item label="	所属角色:" prop="roleId">
            <el-select v-model="ruleForm.roleId" placeholder="请选择所属角色">
              <el-option
                v-for="item in roleSelPageList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="管理员:" prop="adminId" v-if="companyName=='编辑公司'">
            <el-select v-model="ruleForm.adminId" placeholder="请选择管理员">
              <el-option
                v-for="item in adminSelList"
                :label="item.name"
                :value="item.adminId"
                :key="item.adminId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码：" prop="password" v-if="companyName=='添加公司'">
            <el-input v-model="ruleForm.password" placeholder="请输入密码" show-password></el-input>
            <i class="iconfont icon-3702mima"></i>
          </el-form-item>
          <el-form-item label="公司名称：" prop="companyName">
            <el-input v-model="ruleForm.companyName" placeholder="请输入公司名称"></el-input>
          </el-form-item>
          <el-form-item label="公司地址：" prop="address">
            <el-input v-model="ruleForm.address" placeholder="请输入公司地址"></el-input>
          </el-form-item>
          <el-form-item label="营业执照：" prop="businessLicense">
            <UploadAvatar
              @getImage="getImage1($event,'picture')"
              :img="ruleForm.businessLicense"
              ref="picture"
              class="businessCompad"
            />
            <UploadAvatar
              @getImage="getImage3($event,'picture')"
              :img="ruleForm.businessLicense"
              ref="picture"
              class="businessCompad"
            />
            <UploadAvatar
              @getImage="getImage5($event,'picture')"
              :img="ruleForm.businessLicense"
              ref="picture"
              class="businessCompad"
            />
          </el-form-item>
          <el-form-item label="身份证照片：" prop="IdCard">
            <UploadAvatar
              @getImage="getImage2($event,'picture')"
              :img="ruleForm.IdCard"
              ref="picture"
              class="businessCompad"
            />
            <UploadAvatar
              @getImage="getImage4($event,'picture')"
              :img="ruleForm.IdCard"
              ref="picture"
              class="businessCompad"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handlerQu">取 消</el-button>
          <el-button type="primary" @click="handlerSure">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 公司审核的弹框 -->
      <el-dialog
        title="审核"
        :visible.sync="dialogVisibleCheck"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleFormCheck"
          :rules="rulesCheck"
          ref="ruleRefCheck"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="公司审核" prop="examine">
            <el-select v-model="ruleFormCheck.examine" placeholder="请选择审核状态">
              <el-option
                v-for="item in checkList"
                :label="item.name"
                :value="item.examine"
                :key="item.examine"
              ></el-option>
            </el-select>
            <!-- checkList -->
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handlerexamineQu">取消审核</el-button>
          <el-button type="primary" @click="handlerSureExam">确定审核</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  companyList,
  companyDel,
  roleSelNoPage,
  companyAdd,
  adminSel,
  companyUpdate,
  companyCheck
} from "../../utils/api";
import UploadImg from "../../components/UploadImg";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      // 公司列表的数据
      tableData: [],
      // 公司列表的分页
      companyquery: {
        pageNumber: 1,
        pageSize: 10
      },
      //   公司的总条数
      count: 0,
      //   公司的弹框的标题
      companyName: "添加公司",
      //   公司的弹框 显示隐藏
      dialogVisible: false,
      //   公司表单的数据
      ruleForm: {
        name: "",
        userId: "",
        phone: "",
        realName: "",
        password: "",
        roleId: "",
        companyName: "",
        address: "",
        businessLicense: [],
        IdCard: [],
        adminId: ""
      },
      //   公司审核的数据
      checkList: [
        {
          examine: 1,
          name: "通过审核"
        },
        {
          examine: 2,
          name: "未审核"
        },
        {
          examine: 3,
          name: "未通过审核"
        }
      ],
      //   公司的检验
      rules: {
        phone: [
          { required: true, message: "请填写公司负责人手机号", trigger: "blur" }
        ],
        adminId: [{ required: true, message: "请选择管理员", trigger: "blur" }],

        roleId: [{ required: true, message: "请选择角色", trigger: "blur" }],
        realName: [
          { required: true, message: "请填写负责人姓名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请填写密码", trigger: "blur" }],
        companyName: [
          { required: true, message: "请填写公司名称", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请填写公司地址", trigger: "blur" }
        ],
        businessLicense: [
          { required: true, message: "请上传营业执照", trigger: "blur" }
        ],
        IdCard: [
          { required: true, message: "请上传身份证照片", trigger: "blur" }
        ]
      },
      //   公司弹框的角色列表
      roleSelPageList: [],
      //   角色id
      roleId: "",
      //   管理员列表数据
      adminSelList: [],
      //   公司审核的弹框
      dialogVisibleCheck: false,
      //   公司审核数据
      ruleFormCheck: {
        examine: "",
        id: "",
        userId: "",
        roleId: ""
      },
      //   公司审核校验
      rulesCheck: {
        examine: [
          { required: true, message: "请选择审核状态", trigger: "blur" }
        ]
      },
      imageUrl: "",
      fileList: []
    };
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {}
  },
  created() {
    this.getcompanyList();
    const result = JSON.parse(window.sessionStorage.getItem("userInfo"));
    this.roleId = result.roleId;
  },
  components: {
    UploadImg
  },
  methods: {
    //   获取公司列表
    getcompanyList() {
      this.postRequest(companyList, this.companyquery).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.count = res.data.count;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.companyquery.pageSize = val;
      this.getcompanyList();
    },
    handleCurrentChange(val) {
      this.companyquery.pageNumber = val;
      this.getcompanyList();
    },
    // 点击添加公司 显示弹框
    showCanpany() {
      this.companyName = "添加公司";
      this.dialogVisible = !this.dialogVisible;
      this.getroleSelPage();
    },
    // 点击编辑显示弹框 回显数据
    showEdit(data) {
      this.$nextTick(() => {
        this.companyName = "编辑公司";
        this.dialogVisible = !this.dialogVisible;
        this.ruleForm.id = data.id;
        this.ruleForm.roleId = data.roleId;
        this.ruleForm.companyName = data.name;
        this.ruleForm.address = data.address;
      //   this.ruleForm.businessLicense = data.businessLicense.map(v => ({
      //     url: v
      //   }));
      //   // console.log(this.ruleForm.businessLicense)
      //  this.ruleForm.businessLicense.map(v=>{
      //   this.ruleForm.businessLicense=v.url
      //  })
      //   console.log(this.ruleForm.businessLicense)
        // this.ruleForm.IdCard = data.IdCard;
        this.ruleForm.adminId = data.adminId;
        this.ruleForm.userId = window.sessionStorage.getItem("userId");
        this.getadminSel();
        this.getroleSelPage();
      });
    },
    // 营业执照
    getImage1(img) {
      if (img && img !== "" && img !== null) {
        this.ruleForm.businessLicense[0] = img;
      }
    },
    getImage3(img) {
      if (img && img !== "" && img !== null) {
        this.ruleForm.businessLicense[1] = img;
      }
    },
    getImage5(img) {
      if (img && img !== "" && img !== null) {
        this.ruleForm.businessLicense[2] = img;
      }
    },
    //身份证
    getImage2(img) {
      if (img && img !== "" && img !== null) {
        this.ruleForm.IdCard[0] = img;
      }
    },
    getImage4(img) {
      if (img && img !== "" && img !== null) {
        this.ruleForm.IdCard[1] = img;
      }
    },
    // 点击弹框的取消
    handlerQu() {
      this.dialogVisible = false;
      this.$refs.ruleFormRef.resetFields();
    },
    // 获取角色列表
    getroleSelPage() {
      const params = {
        // pageNumber: 1,
        // pageSize: 100,
        PermissionType: 1,
        roleId: this.roleId,
        companyId: this.org_id
      };
      this.postRequest(roleSelNoPage, params).then(res => {
        if (res.code == 200) {
          this.roleSelPageList = res.data;
        }
      });
    },
    // 获取管理列表
    getadminSel() {
      const params = {
        pageNumber: 1,
        pageSize: 100,
        companyId: this.ruleForm.id
      };
      this.postRequest(adminSel, params).then(res => {
        if (res.code == 200) {
          this.adminSelList = res.data;
        }
      });
    },
    // 点击确定判断是添加公司还是删除公司
    handlerSure() {
      this.$refs.ruleFormRef.validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        if (this.companyName == "添加公司") {
          this.handlerAdd();
        } else if (this.companyName == "编辑公司") {
          this.handlerEdit();
        }
      });
    },
    // 封装一个添加公司的函数
    handlerAdd() {
      this.ruleForm.userId = window.sessionStorage.getItem("userId");
      this.ruleForm.businessLicense = this.ruleForm.businessLicense.join(",");
      this.ruleForm.IdCard = this.ruleForm.IdCard.join(",");
      this.postRequest(companyAdd, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("添加公司成功");
          this.getcompanyList();
          this.dialogVisible = false;
          this.$refs.ruleFormRef.resetFields();
        }
      });
    },
    // 封装一个编辑公司的函数
    handlerEdit() {
      this.ruleForm.businessLicense = this.ruleForm.businessLicense.join(",");
      this.ruleForm.IdCard = this.ruleForm.IdCard.join(",");
      this.postRequest(companyUpdate, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑公司成功");
          this.getcompanyList();
          this.dialogVisible = false;
          this.$refs.ruleFormRef.resetFields();
        }
      });
    },
    // 点击删除
    handlerDel(id) {
      const params = {
        userId: window.sessionStorage.getItem("userId"),
        id: id
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(companyDel, params).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getcompanyList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 公司审核 弹框
    handlerCheck(id) {
      this.ruleFormCheck.id = id;
      this.dialogVisibleCheck = !this.dialogVisibleCheck;
    },
    // 点击确定审核
    handlerSureExam() {
      this.$refs.ruleRefCheck.validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        const params = {
          id: this.ruleFormCheck.id,
          examine: this.ruleFormCheck.examine,
          userId: window.sessionStorage.getItem("userId"),
          roleId: this.roleId
        };
        this.postRequest(companyCheck, params).then(res => {
          if (res.code == 200) {
            this.$message.success("审核成功");
            this.getcompanyList();
            this.dialogVisibleCheck = false;
            this.$refs.ruleRefCheck.resetFields();
          }
        });
      });
    },
    // 点击取消审核
    handlerexamineQu() {
      this.dialogVisibleCheck = false;
      this.$refs.ruleRefCheck.resetFields();
      this.$message.error("取消审核");
    },
    handleClose() {
      this.dialogVisibleCheck = false;
      this.$refs.ruleFormRef.resetFields();
      this.ruleForm.businessLicense=[];
      this.ruleForm.IdCard=[]
    },
    handlerImg(){
      this.$router.push("/uploadImg")
    }
  }
};
</script>

<style lang="less" scoped>
.el-form /deep/ .el-form-item__content {
  display: flex;
  flex-direction: row;
  margin-left: 0;
}
.businessCompad {
  margin: 0 10px;
}
</style>